@import "../../../vars.scss";
.device {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 30px;
	color: $info-color;
	.data-item {
		position: relative;
		&::after {
			position: absolute;
			top: -15px;
			left: -15px;
			width: 190px;
			height: 76px;
			content: "";
			background-image: url("@public/images/decoration/power/8.png");
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
		.icon {
			width: 50px;
			height: 46px;
			background-image: url("@public/images/decoration/power/28.png");
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
		.icon.icon-1 {
			background-image: url("@public/images/decoration/power/6.png");
		}
		.icon.icon-2 {
			background-image: url("@public/images/decoration/power/7.png");
		}
		.icon.icon-3 {
			background-image: url("@public/images/decoration/power/4.png");
		}
		.icon.icon-4 {
			background-image: url("@public/images/decoration/power/3.png");
		}
		.icon.icon-5 {
			background-image: url("@public/images/decoration/power/5.png");
		}
		.data-info {
			padding-left: 10px;
			.data-value {
				padding-top: 5px;
				.value {
					padding-right: 10px;
					font-family: Bahnschrift;
					font-size: 22px;
					font-weight: 400;
					color: #2beaab;
					text-align: left;
				}
				.unit {
					color: $base-text-color;
				}
			}
			.split,
			.sub-value {
				font-size: 18px;
			}
		}
	}
}
